<div class="wp-20 group-detail" ng-cloak>
    <ol class="breadcrumb">
        <li>广告中心</li>
        <li><a class="tittle-color" ui-sref="campaigns({advertiserId:advertiserId})" class="tittle-color">广告投放</a></li>
        <li><a class="tittle-color" ui-sref="campaigns.promotionGroup({campaignsId:formData.campaignId,advertiserId:advertiserId})" class="tittle-color">广告推广组</a></li>
        <li>广告推广组{{!planEdit ? "详情" : formData.groupId ? "修改" : "新建"}}</li>
    </ol>
    <div class="clearfix mt-10" ng-show="formData.groupId">
        <label class="title">
            <label>A</label>
            <span>{{title.advShortName}}</span>
        </label>
        <label class="title">
            <label>C</label>
            <span>{{title.campaignName}}</span>
        </label>
        <label class="title">
            <label>G</label>
            <span>{{title.groupName}}</span>
        </label>

    </div>
    <form class="form-horizontal" name="mainForm" ng-class="{planShow: !planEdit}" novalidate>
        <section class="fg-section">
            <h5>基本设置</h5>
            <div class="form-group" style="overflow: hidden;">
                <label class="col-sm-2 control-label">广告推广组名称</label>

                <div class="col-sm-8">
                    <p class="form-control-static" ng-hide="planEdit">{{formData.groupName}}</p>

                    <div ng-show="planEdit" class="form-inline">
                        <input type="text" name="groupName" class="form-control mw-300" style="width: 300px" ng-model="formData.groupName" ng-blur="checkGroupName()" maxlength="30" required >
                        <span ng-if="checkData.groupName == 'r'" class="cl"><i class="fa fa-check right" aria-hidden="true"></i></span>
                        <span ng-if="checkData.groupName == 'e'" class="cl"><i class="fa fa-times error" aria-hidden="true"></i>{{hintData.groupName}}</span>
                    </div>
                </div>
            </div>

            <div class="form-group" ng-hide="formData.groupId">
                <label class="col-sm-2 control-label">加载现有推广组</label>

                <div class="col-sm-8">
                    <div>
                        <input type="text" class="form-control pull-left mw-300" ng-model="oldName" readonly>
                        <a class="btn btn-link pull-left" ng-click="modelOpen(modelAdvertiserParam)">选择</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="fg-section">
            <h5>用户在那里看到广告<small>（流量的来源及推广位置定向）</small></h5>
            <div class="form-group">
                <label class="col-sm-2 control-label">媒体</label>
                <div class="col-sm-8  media-checkbox">
                    <div ng-hide="planEdit">
                        <p class="form-control-static pull-left iw-80" ng-repeat="item in formData.targetMediaType">
                            {{initData.codeTable[item]}}
                        </p>
                        <p class="form-control-static">
                            {{formData.targetApp}}
                        </p>
                    </div>
                    <div ng-show="planEdit">
                        <div class="div-mediaType">
                            <label class="radio-inline">
                                <input type="radio" name="targetMediaType" value="1" ng-model="ctrlData.targetMediaType" ng-disabled="formData.groupId" ng-click="formData.targetApp = ''" class="magic-radio" id="targetMediaType1">
                                <label for="targetMediaType1"></label>类型
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="targetMediaType" value="2" ng-model="ctrlData.targetMediaType" ng-disabled="formData.groupId" ng-click="formData.targetMediaType = []" class="magic-radio" id="targetMediaType2">
                                <label for="targetMediaType2"></label>指定应用
                            </label>
                        </div>
                        <div class="checkbox-wapper div-mediaType-checkbox" ng-show="ctrlData.targetMediaType == '1'">
                            <label class="checkbox-inline iw-110" ng-repeat="item in initData.initCode.targetMediaType">
                                <input type="checkbox" name="targetMediaType"
                                       ng-checked="isSelected('targetMediaType', item)"
                                       ng-disabled="formData.groupId"
                                       ng-click="updateSelection($event, 'targetMediaType', item)"
                                       value="{{item}}"
                                       class="magic-checkbox"
                                       id="{{initData.initCode.targetMediaType[$index]}}">
                                <label for="{{initData.initCode.targetMediaType[$index]}}"></label>
                                {{initData.codeTable[item]}}
                            </label>
                        </div>
                        <div ng-show="ctrlData.targetMediaType == '2'">
                            <input type="text" name="targetApp" class="form-control mw-350 pull-left" style="max-width: 300px;margin-right: 10px" ng-model="formData.targetApp" placeholder="指定应用打包ID:com.ximalaya.ting.android" ng-readonly="formData.groupId" ng-required="ctrlData.targetMediaType == '2'" >
                            <p class="form-control-static pull-left ml-10">
                                <small>应用包名或网站域名</small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="fg-section">
            <h5>用户那些人看到广告<small>（设备定向 区域定向 受众定向）</small></h5>
            <section>
                <h5 style="margin-left: 20px">设备定向</h5>
                <div class="form-group">
                    <label class="col-sm-2 control-label">SIM卡设备</label>
                    <div class="col-sm-8">
                        <p class="form-control-static" ng-hide="planEdit">{{initData.codeTable[formData.targetSim]}}</p>

                        <div ng-show="planEdit">
                            <label class="radio-inline">
                                <input type="radio" name="targetSim" value="180" ng-model="formData.targetSim" ng-disabled="formData.groupId" class="magic-radio" id="targetSim1">
                                <label for="targetSim1"></label>不限
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="targetSim" value="181" ng-model="formData.targetSim" ng-disabled="formData.groupId" class="magic-radio" id="targetSim2">
                                <label for="targetSim2"></label>仅限SIM卡设备
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group" ng-repeat="groupItem in [
	                    ['targetPlatform','设备品牌'],
	                    ['targetOS','操作系统'],
	                    ['targetScreen','屏幕分辨率'],
	                    ['targetNet','网络类型'],
	                    ['targetOperator','运营商']
	                ]">
                    <label class="col-sm-2 control-label">{{groupItem[1]}}</label>
                    <div class="col-sm-8">
                        <div ng-hide="planEdit">
                            <p class="form-control-static" ng-if="formData[groupItem[0]].length == 0">全部（{{initData.initCode[groupItem[0]].length + "/" + initData.initCode[groupItem[0]].length}}）</p>
                            <p class="form-control-static" ng-if="formData[groupItem[0]].length >0">自定义（{{formData[groupItem[0]].length + "/" + initData.initCode[groupItem[0]].length}}）</p>
                            <div class="clearfix mt-10">
                                <p class="form-control-static pull-left iw-110" ng-if="formData[groupItem[0]].length != 0" ng-repeat="item in formData[groupItem[0]]">
                                    {{initData.codeTable[item]}}
                                </p>
                                <p class="form-control-static pull-left iw-110" ng-if="formData[groupItem[0]].length == 0" ng-repeat="item in initData.initCode[groupItem[0]]">
                                    {{initData.codeTable[item]}}
                                </p>
                            </div>
                        </div>

                        <div ng-show="planEdit">
                            <div>
                                <label class="radio-inline">
                                    <input type="radio" name="{{groupItem[0]}}" value="1" ng-model="ctrlData[groupItem[0]]" ng-disabled="formData.groupId" ng-click="formData[groupItem[0]] = []" class="magic-radio" id="{{groupItem[0]+1}}">
                                    <label for="{{groupItem[0]+1}}"></label>全部
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="{{groupItem[0]}}" value="2" ng-model="ctrlData[groupItem[0]]" ng-disabled="formData.groupId" class="magic-radio" id="{{groupItem[0]+2}}">
                                    <label for="{{groupItem[0]+2}}"></label>自定义
                                </label>
                            </div>
                            <div class="checkbox-wapper div-checkboxList" ng-show="ctrlData[groupItem[0]] == '2'">
                                <input type="checkbox" name="allName" ng-checked="checboxAll([groupItem[0]])" value="[groupItem[0]]"  ng-click="selectAll($event, [groupItem[0]])" ng-disabled="formData.groupId" class="magic-checkbox" id="{{'selectAll'+$index}}">
                                <label class="selectAll-set" ng-class="{'half':halfData[groupItem[0]]}" for="{{'selectAll'+$index}}"></label>
                                全选<br/>
                                <label class="checkbox-inline iw-110" ng-repeat="item in initData.initCode[groupItem[0]]">
                                    <input type="checkbox" name="{{[groupItem[0]]}}" ng-checked="isSelected([groupItem[0]], item)" ng-disabled="formData.groupId" ng-click="updateSelection($event, [groupItem[0]],item)" value="{{item}}" class="magic-checkbox" id="{{initData.initCode[groupItem[0]][$index]}}">
                                    <label for="{{initData.initCode[groupItem[0]][$index]}}"></label>
                                    {{initData.codeTable[item]}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <h5 style="margin-left: 20px;">位置定向</h5>
                <div class="form-group">
                    <label class="col-sm-2 control-label">省市地域</label>
                    <div class="col-sm-8">
                        <div ng-show="planEdit">
                            <label class="radio-inline">
                                <input type="radio" name="targetRegional" value="1" ng-model="ctrlData.targetRegional" ng-disabled="formData.groupId" ng-click="formData.targetRegional = []" class="magic-radio" id="UrbanArea1">
                                <label for="UrbanArea1"></label>全中国
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="targetRegional" value="2" ng-model="ctrlData.targetRegional" ng-disabled="formData.groupId" class="magic-radio" id="UrbanArea2">
                                <label for="UrbanArea2"></label>特定地区
                            </label>
                        </div>
                        <div class="responsive-wapper">
                            <div class="responsive-container">
                                <div class="checkbox-nest-wapper mr-10" ng-show="ctrlData.targetRegional == '2' && planEdit">
                                    <ul class="list-unstyled">
                                        <li ng-repeat="countryItem in initData.initCode.targetRegional">
                                            <div class="open-cbox-wapper">
                                                <a href="" class="open-cbox-list" ng-click="open('countryItem')">
                                                    <span class="glyphicon glyphicon-triangle-right" ng-hide="countryItem.active" aria-hidden="true"></span>
                                                    <span class="glyphicon glyphicon-triangle-bottom" ng-show="countryItem.active" aria-hidden="true"></span>
                                                </a>
                                                <label class="checkbox-inline iw-110">
                                                    <input type="checkbox" name="targetRegional" ng-checked="isSelected('targetRegional', countryItem[0])" ng-disabled="formData.groupId" ng-click="updateSelectionNest($event, 'targetRegional',countryItem[0])" value="countryItem[0]" class="magic-checkbox" id="{{'countryItem'+countryItem[0]}}">
                                                    <label class="cbox-list-margin" ng-class="{'half':halfCityData[countryItem[0]]}" for="{{'countryItem'+countryItem[0]}}"></label>
                                                    {{initData.codeTable[countryItem[0]]}}
                                                </label>
                                            </div>
                                            <ul class="list-unstyled" ng-show="countryItem.active">
                                                <li ng-repeat="provinceItem in countryItem[1]" ng-class="{clearl:!($index%2)}">
                                                    <div class="open-cbox-wapper">
                                                        <a href="" class="open-cbox-list" ng-click="open('provinceItem')" ng-show="provinceItem[1].length > 0">
                                                            <span class="glyphicon glyphicon-triangle-right" ng-hide="provinceItem.active" aria-hidden="true"></span>
                                                            <span class="glyphicon glyphicon-triangle-bottom" ng-show="provinceItem.active" aria-hidden="true"></span>
                                                        </a>
                                                        <label class="checkbox-inline iw-110">
                                                            <input type="checkbox" name="targetRegional" ng-checked="isSelected('targetRegional', countryItem[0]) || isSelected('targetRegional', provinceItem[0])" ng-disabled="formData.groupId" ng-click="updateSelectionNest($event, 'targetRegional',provinceItem[0])" value="provinceItem[0]" class="magic-checkbox" id="{{'provinceItem'+provinceItem[0]}}">
                                                            <label class="cbox-list-margin" ng-class="{'half':halfCityData[provinceItem[0]]}" for="{{'provinceItem'+provinceItem[0]}}"></label>
                                                            {{initData.codeTable[provinceItem[0]]}}
                                                        </label>
                                                    </div>
                                                    <ul class="list-unstyled" ng-show="provinceItem.active">
                                                        <li ng-repeat="cityItem in provinceItem[1]">
                                                            <div class="open-cbox-wapper">
                                                                <label class="checkbox-inline iw-110">
                                                                    <input type="checkbox" name="targetRegional" ng-checked="isSelected('targetRegional', countryItem[0]) || isSelected('targetRegional', provinceItem[0]) || isSelected('targetRegional', cityItem)" ng-disabled="formData.groupId" ng-click="updateSelectionNest($event, 'targetRegional', cityItem)" value="cityItem" class="magic-checkbox" id="{{'cityItem'+cityItem}}">
                                                                    <label class="cbox-list-margin" for="{{'cityItem'+cityItem}}"></label>
                                                                    {{initData.codeTable[cityItem]}}
                                                                </label>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 展示框 -->
                                <div ng-hide="planEdit" class="city-hobby-detail">{{ctrlData.targetRegional==2?"自定义":"全中国"}}</div>
                                <div class="checkbox-nest-wapper" ng-show="ctrlData.targetRegional == '2'||(formData.groupId && !planEdit)">
                                    <dl ng-repeat="countryItem in ctrlData.targetRegionalFormart.countryItem">
                                        <dt>{{initData.codeTable[countryItem]}}</dt>
                                        <dd>
                                            <ul class="list-inline">
                                                <li class="w-80" ng-repeat="provinceItem in ctrlData.targetRegionalFormart.provinceItem">{{initData.codeTable[provinceItem]}}</li>
                                            </ul>
                                            <!-- 如果全选，则隐藏下面部分代码只展示上面的省份和国家 -->
                                            <dl ng-hide="formData.targetRegional == initData.initCode.targetRegional[0][0]" ng-repeat="cityItem in ctrlData.targetRegionalFormart.cityItem">
                                                <dt>{{initData.codeTable[cityItem[0]]}}</dt>
                                                <dd class="w-80" ng-repeat="item in cityItem[1]">{{initData.codeTable[item]}}</dd>
                                            </dl>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-repeat="groupItem in [
                    ['targetInternet','上网场景']
				]">
                    <label class="col-sm-2 control-label">{{groupItem[1]}}</label>
                    <div class="col-sm-8">
                        <div ng-hide="planEdit">
                            <!-- <p class="form-control-static">全部（{{(formData[groupItem[0]].length == 0 ? initData.initCode[groupItem[0]].length : formData[groupItem[0]].length) + "/" + initData.initCode[groupItem[0]].length}}）</p> -->
                            <p class="form-control-static" ng-if="formData[groupItem[0]].length == 0">全部（{{initData.initCode[groupItem[0]].length + "/" + initData.initCode[groupItem[0]].length}}）</p>
                            <p class="form-control-static" ng-if="formData[groupItem[0]].length >0">自定义（{{formData[groupItem[0]].length + "/" + initData.initCode[groupItem[0]].length}}）</p>

                            <div class="clearfix mt-10">
                                <p class="form-control-static pull-left iw-110" ng-if="formData[groupItem[0]].length != 0" ng-repeat="item in formData[groupItem[0]]">
                                    {{initData.codeTable[item]}}
                                </p>
                                <p class="form-control-static pull-left iw-110" ng-if="formData[groupItem[0]].length == 0" ng-repeat="item in initData.initCode[groupItem[0]]">
                                    {{initData.codeTable[item]}}
                                </p>
                            </div>
                        </div>

                        <div ng-show="planEdit">
                            <div>
                                <label class="radio-inline">
                                    <input type="radio" name="{{groupItem[0]}}" value="1" ng-model="ctrlData[groupItem[0]]" ng-disabled="formData.groupId" ng-click="formData[groupItem[0]] = []" class="magic-radio" id="InternetScene1">
                                    <label for="InternetScene1"></label>全部
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="{{groupItem[0]}}" value="2" ng-model="ctrlData[groupItem[0]]" ng-disabled="formData.groupId" class="magic-radio" id="InternetScene2">
                                    <label for="InternetScene2"></label>自定义
                                </label>
                            </div>
                            <div class="checkbox-wapper div-checkboxList" ng-show="ctrlData[groupItem[0]] == '2'">
                                <input type="checkbox" name="allName" ng-checked="checboxAll([groupItem[0]])" value="[groupItem[0]]"  ng-click="selectAll($event, [groupItem[0]])" ng-disabled="formData.groupId" class="magic-checkbox" id="InternetScene-selectAll">
                                <label class="selectAll-set" ng-class="{'half':halfData[groupItem[0]]}" for="InternetScene-selectAll"></label>
                                全选<br/>
                                <label class="checkbox-inline iw-110" ng-repeat="item in initData.initCode[groupItem[0]]">
                                    <input type="checkbox" name="{{[groupItem[0]]}}" ng-checked="isSelected([groupItem[0]], item)" ng-disabled="formData.groupId" ng-click="updateSelection($event, [groupItem[0]],item)" value="{{item}}" class="magic-checkbox" id="{{initData.initCode[groupItem[0]][$index]}}">
                                    <label for="{{initData.initCode[groupItem[0]][$index]}}"></label>
                                    {{initData.codeTable[item]}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <h5 style="margin-left: 20px">受众定向</h5>
                <div class="form-group">
                    <label class="col-sm-2 control-label">内容兴趣</label>
                    <div class="col-sm-8">
                        <div ng-show="planEdit">
                            <label class="radio-inline">
                                <input type="radio" name="targetTags" value="1" ng-model="ctrlData.targetTags" ng-disabled="formData.groupId" ng-click="formData.targetTags = []" class="magic-radio" id="Hobby1">
                                <label for="Hobby1"></label>全部
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="targetTags" value="2" ng-disabled="formData.groupId" ng-model="ctrlData.targetTags" ng-click="getTagData()" class="magic-radio" id="Hobby2">
                                <label for="Hobby2"></label>自定义
                            </label>
                        </div>
                        <div class="responsive-wapper">
                            <div class="responsive-container">
                                <div class="checkbox-nest-wapper mr-10" ng-show="ctrlData.targetTags == '2' && planEdit">
                                    <ul class="list-unstyled">
                                        <a ng-click="editTags()" class="edit" ng-show="!formData.groupId&&planEdit">{{editTag == true ? "取消" : "编辑"}}</a>
                                        <li ng-repeat="parentItem in tagsResult" class="{clearl:!($index%2)} hobbyList-set" >
                                            <!-- 父级标签 -->
                                            <div class="open-cbox-wapper">
                                                <a href="" class="open-cbox-list" ng-click="open('parentItem')">
                                                    <span class="glyphicon glyphicon-triangle-right" ng-hide="parentItem.active" aria-hidden="true"></span>
                                                    <span class="glyphicon glyphicon-triangle-bottom" ng-show="parentItem.active" aria-hidden="true"></span>
                                                </a>
                                                <label class="checkbox-inline iw-110">
                                                    <input type="checkbox" name="targetTag"  ng-checked="isTagSelected(parentItem.tagId)" ng-disabled="formData.groupId" ng-click="updateSelectionParentTags($event, 'targetTags',parentItem.tagId)" value="parentItem.tagId" class="magic-checkbox" id="{{'parentItem'+$index}}">
                                                    <label class="cbox-list-margin" ng-class="{'half':halfTagData[parentItem.tagId]}" for="{{'parentItem'+$index}}"></label>
                                                    {{parentItem.tagName}}
                                                </label>

                                            </div>
                                            <!-- 子级标签 -->

                                            <ul class="list-unstyled" ng-show="parentItem.active">
                                                <li ng-repeat="childItem in parentItem.list" ng-class="{clearl:!($index%2)}" class="hobbyList-set">
                                                    <div class="open-cbox-wapper"><label class="checkbox-inline iw-110">
                                                        <input type="checkbox"  name="targetTag" ng-checked="isTagSelected(childItem.tagId)" ng-disabled="formData.groupId" ng-click="updateSelectionChildTags($event, 'targetTags',childItem.tagId)" value="childItem.tagId" class="magic-checkbox" id="{{'childItem'+childItem.tagId}}">
                                                        <label class="cbox-list-margin" for="{{'childItem'+childItem.tagId}}"></label>
                                                        {{childItem.tagName}}

                                                        <span class="glyphicon glyphicon-trash delete" aria-hidden="true" ng-show="editTag" ng-click="deleteTag(childItem.tagId)"></span>

                                                        <!-- 删除内容标签 -->
                                                    </label>
                                                    </div>
                                                </li>
                                                <!-- 添加内容标签 -->
                                                <div ng-show="editTag" >
                                                    <input type="text" ng-blur="addTag(parentItem.tagId)" class="bg" ng-focus="addTagFocus()"  ng-model="ctrlData.newTag" />
                                                </div>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <div ng-hide="planEdit" class="city-hobby-detail">{{ctrlData.targetTags==2?"自定义":"全部"}}</div>
                                <div class="checkbox-nest-wapper" ng-show="ctrlData.targetTags == '2'||(formData.groupId && !planEdit)">
                                    <dl ng-repeat="parentItem in tagSelected">
                                        <dt>{{parentItem.tagName}}</dt>
                                        <dd>
                                            <ul class="list-inline">
                                                <li class="w-80" ng-repeat="childItem in parentItem.list">{{childItem.tagName}}</li>
                                            </ul>
                                            <!-- <dl ng-hide="formData.targetRegional == initData.initCode.targetRegional[0][0]" ng-repeat="cityItem in ctrlData.targetRegionalFormart.cityItem">
                                                <dt>{{initData.codeTable[cityItem[0]]}}</dt>
                                                <dd class="w-80" ng-repeat="item in cityItem[1]">{{initData.codeTable[item]}}</dd>
                                            </dl> -->
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </section>
        <div class="text-center">
            <button type="button" class="btn btn-primary" ng-show="planEdit" ng-click="submits()">确定</button>
            <button type="button" class="btn btn-primary" ng-hide="planEdit" ng-click="edit()">修改</button>
            <a type="button" class="btn ims-btn" ng-click="cancel()">取消</a>
        </div>
    </form>

    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header ng-cloak">
            <h5 class="modal-title" style="display: inline-block">{{param.title}}</h5>
            <span class="glyphicon glyphicon-remove" aria-hidden="true" ng-click="modelCancel()"></span>
        </div>
        <div class="modal-body ng-cloak">
            <div class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="搜索" ng-keyup="search($event)" ng-model="advKeyword">
				<span class="input-group-btn">
					<button class="btn btn-default" type="button" ng-click="search()">
						<i class="glyphicon glyphicon-search"></i>
					</button>
				</span>
            </div>
            <div class="row">
                <ul class="list-unstyled advertiserList">
                    <li ng-repeat="item in param.item" ng-click="modelOk($event)">
                        {{ item.groupName }}
                    </li>
                </ul>
            </div>
            <s-pagination conf="paginationConf"></s-pagination>
        </div>
    </script>
</div>
